<template>
	<view class="top-content" v-for="(item,index) in myList" :key="index" @tap="tapPostD(item.id)">
		<view class="content-headImage">
			<view class="content-headImage-item">
				<view>
					<image :src="'http://127.0.0.1:8080' + item.avatar"></image>
				</view>
				<view>{{item.nickName}}</view>
				<view class="content-button">
					<view class="content-button-item" @tap.stop="handleFollowClick(item.id)">
						删除
					</view>
				</view>
			</view>
			<view class="content-headImage-text">
				<view class="text-wrap">{{item.title}}</view>
			</view>
			<view class="content-Image-item" v-show="item.imgUrl">
				<image v-for="(item1,index1) in item.imgUrl" :key="index1" :src="item1" @tap.stop="tapImage(item1)">
				</image>
				<video v-show="item.videoUrl" v-for="(item2, index2) in item.videoUrl" :key="index2"
					:src="item2"></video>
			</view>
		</view>
		<view class="content-Image-item-icon">
			<!-- <view class="child">
				<image src="/static/images/banner/share.png" @tap.stop="actionShare"></image>
				<view>分享</view>
			</view> -->
			<view class="child">
				<image src="/static/images/banner/comment.png"></image>
				<view>评论</view>
			</view>
			<view class="child">
				<!-- <image src="/static/images/banner/ok.png"></image> -->
				<view>点赞数:</view>
				<view>{{item.totalLikeCount}}</view>
			</view>
		</view>
	</view>

	<!-- 点击帖子右上角三个点 -->
	<view>
		<u-modal :show="show" :title="title" :showConfirmButton="true" :showCancelButton="true" @cancel="cancel"
			@confirm="confirm(postId)">
			<view>删除此帖后，其中的回复都将会被删除</view>
		</u-modal>
	</view>

	<!-- 删除成功消息提示 -->
	<view>
		<u-toast ref="uToastRef"></u-toast>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getUser
	} from "@/utils/auth";
	import {
		listPost,
		delPost
	} from '@/api/tiezi/post'
	const userid = getUser()
	const myList = ref([])
	const postId = ref() //存储帖子id
	const uToastRef = ref(null)
	//设置层级初始值
	const leState = ref(false)

	function Post() {
		listPost({
			userId: userid
		}).then((res) => {
			// console.log(res, '333')
			//对图片进行处理(转化为数组形式)
			for (let i = 0; i < res.rows.length; i++) {
				if (res.rows[i].imgUrl) {
					res.rows[i].imgUrl = JSON.parse(res.rows[i].imgUrl)
				}
				if (res.rows[i].videoUrl) {
					res.rows[i].videoUrl = JSON.parse(res.rows[i].videoUrl)
				}
			}
			myList.value = res.rows
			console.log(myList, '333')
		})
	}
	onMounted(() => {
		//生命周期初始调用
		Post()
	})
	const show = ref(false)
	const value = ref('')
	const title = ref('删除')
	const handleFollowClick = ((id) => {
		//阻止事件冒泡
		// event.stopPropagation();
		// console.log(id, 'id')
		postId.value = id
		show.value = true
	})
	const cancel = (() => {
		show.value = false
	})
	const confirm = ((postId) => {
		console.log(postId, 'postId')
		delPost([postId]).then((res) => {
			//删除成功消息提示
			uToastRef.value.show({
				message: '删除成功',
				type: 'success',
				position: ' bottom'
			})
			show.value = false

			//再次调用方法，刷新列表
			Post()
		})
	})
	//点击帖子详情
	const tapPostD = ((id) => {
		if (leState.value == false) {
			uni.navigateTo({
				url: '/pages/postDetail/index?data=' + id
			})
		}
	})
	//点击图片预览事件
	function tapImage(item1) {
		//阻止事件冒泡
		// event.stopPropagation();
		//预览图片
		uni.previewImage({
			urls: item1.split(","),
			current: item1,
			loop: true
		})
		console.log('点击了图片')
	}
	//点击图片分享
	const actionShare = (()=>{
		//阻止事件冒泡
		// event.stopPropagation();
		console.log('分享了123456789')
	})
</script>

<style lang="scss" scoped>
	// page {
	// 	background-color: ;
	// }

	.top-content {
		margin: 15rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 10rpx;
		border: 2rpx solid #84AED0;
		// background-color: red;
		.content-headImage {
			padding: 20rpx;
			margin-bottom: 10rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.content-button {
					display: flex;
					align-items: center;
				}

				.content-button-item {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					font-size: 24rpx;
					color: #FF8C00;
				}

				.popup-delect {
					position: absolute;
					right: 0rpx;
					font-size: 30rpx;
				}
			}

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				/* 创建3列 */
				grid-gap: 10rpx;

				/* 格子之间的间距 */
				image {
					border-radius: 10rpx;
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}
				video {
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.child {
				display: flex;

				view {
					margin-left: 20rpx;
				}
			}

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>